<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      案例一： 普通事件的添加
      <hr />
      <button @click="fn">点击</button> <br />
      案例二： 要去回车弹出input的value值
      <hr />
      <div>
        <input type="text" @keydown="getVal" />
      </div>
      案例三： 即有e，也有其他参数: 必须用$event来对应事件对象
      <hr />
      <div>
        <button @click="handler(1000,$event)">点击</button>
      </div>
      案例四：事件传参
      <hr />
      <div>
        <ul>
          <li v-for="(item,index) in todos">
            <!-- {{ item.task }} <button @click="del(index)">删除</button> -->
            {{ item.task }} <button @click="del(item.id)">删除</button>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script src="../../lib/vue.global.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          todos: [
            {
              id: 1,
              task: "任务一",
            },
            {
              id: 2,
              task: "任务二",
            },
          ],
        };
      },
      methods: {
        // del(index) {
        del(id) {
          // 界面中删除一条，意味着我们只要删除todos中对应的这一条即可
          // 数组中删除一条      splice   filter
          // this.todos.splice(index,1)
          this.todos = this.todos.filter((item) => item.id != id);
        },
        fn() {
          // 这是事件处理程序，也是方法，我们必须了解： 1. 事件对象  2. 事件传参
          alert("vue中的事件");
        },
        getVal(e) {
          // 结论： 原生js如何使用e，那你就如何使用
          if (e.keyCode == 13) {
            alert(e.target.value);
          }
        },
        handler(type, e) {
          // 问题是：这个事件处理程序即需要事件对象e，也需要另外一个参数type，怎么办？
          console.log(e);
          console.log(type);
        },
      },
    }).mount("#app");
  </script>
</html>
